<template>
  <div class="container">
    <form>
      <div class="form-group">
        <label>姓名</label>
        <input v-model="name" class="form-control" type="text" />
      </div>
      <div class="form-group">
        <label>颜值打分</label>
        <input v-model="score" class="form-control" type="text" />
      </div>
      <div class="form-group">
        <button @click="handleAdd" class="btn btn-primary" type="button">
          添加
        </button>
        <button class="btn btn-warning" type="reset">重置</button>
        <div class="pull-right">
          <button
            v-for="(item, index) in tabsArr"
            :class="['btn', { 'btn-danger': index == scoreType }]"
            type="button"
            @click="handleTab(index)"
          >
            {{ item }}
          </button>
        </div>
      </div>
    </form>
    <table class="table table-bordered">
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>颜值</th>
        <th>操作</th>
      </tr>
      <tr v-if="starList.length==0">
        <td colspan="4" class="text-center">没有任何数据~</td>
      </tr>
      <tr v-for="(item, index) in filterStarList" :key="index">
        <td>{{ index }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.score }}</td>
        <td>
          <button @click="handleDel(index)" class="btn btn-danger btn-xs" type="button" name="button">
            删除
          </button>
        </td>
      </tr>
    </table>
    <div class="form-group text-right">
      <button @click="handleDelAll" class="btn btn-danger btn-sm" type="button" name="button">
        删除全部
      </button>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from "vue";
const name = ref("三丰");
const score = ref(100);
const starList = ref([
  { name: "三丰", score: 100 },
  { name: "无忌", score: 90 },
]);

//新增明星
const handleAdd = () => {
  starList.value.push({
    name: name.value,
    score: score.value,
  });
};

//菜单切换
const tabsArr = ["全部明星", "及格明星", "不及格明星"];
const scoreType = ref(0); //标记被选中的菜单
const handleTab = (idx) => {
  scoreType.value = idx;
};
const filterStarList = computed(() => {
  if (scoreType.value == 0) {
    return starList.value; //返回全部
  }
  if (scoreType.value == 1) {
    let arr = starList.value.filter((item) => {
      return item.score >= 60; //此处如果return为true，则数据会被保留，否则就删除
    });
    return arr; //返回及格
  }
  if (scoreType.value == 2) {
    let arr = starList.value.filter((item) => {
      return item.score < 60; //此处如果return为true，则数据会被保留，否则就删除
    });
    return arr; //返回不及格
  }
});

// 单个删除
const handleDel = (idx)=>{
  starList.value.splice(idx,1)
}

// 删除全部
const handleDelAll = ()=>{
  starList.value = []
}

//缓存数据
watch(starList,()=>{
  console.log('检测到了starList变化');
  let list = JSON.stringify(starList.value)
  localStorage.setItem('stars',list)
},{deep:true})

// 提取本地存储数据
let memoryList = localStorage.getItem('stars')
if(memoryList){
  starList.value = JSON.parse(memoryList)
}
</script>

<style lang="scss" scoped>
@import "bootstrap/scss/bootstrap";
</style>
